<template>
	<view class="page-dynamice">
		<!-- topbar -->
		<cl-sticky is-topbar>
			<cl-topbar :title="null" :show-back="false" :border="false">
				<view class="content">
					<image src="@/static/icon/fabu_1.png" mode="aspectFill" class="icon" @tap="navigateToPublish()" />
					<view class="tabs">
						<!--这里进行遍历数据-->
						<view class="item" :class="{ 'is-active': tabsActive == item.name }"
							v-for="(item, index) in tabs" :key="index" @tap="activeTabs(item)">
							{{ item.label }}
							<image src="@/static/icon/tabs-icon.png" mode="aspectFill" v-if="item.name == tabsActive" />
						</view>
					</view>
				</view>
			</cl-topbar>

			<!-- 搜索框 -->
			<view class="search">
				<cl-input confirmType="搜索" prefix-icon="cl-icon-search" placeholder="搜索动态" round
					@confirm="searchArticle"></cl-input>
			</view>
		</cl-sticky>
		
		
		
		
		
		
		
		<!--假数据-->
		<view class="list" v-for="(item, index) in hot" :key="index">
			<view>{{item.title}}</view>
			<view class="article-item">
				<view class="avatar-group">
					<view class="avatar">
						<image lazy-load="true" :src="item.cover" mode="aspectFill" style="height: 200%" />
					</view>
				</view>
			</view>
		</view>
		<!--假数据-->
		<view class="list" v-for="(item, index) in may" :key="index">
			<view>{{item.title}}</view>
			<view class="article-item">
				<view class="avatar-group">
					<view class="avatar">
						<image lazy-load="true" :src="item.img" mode="aspectFill" style="height: 200%" />
					</view>
				</view>
			</view>
		</view>











		<!-- 列表 -->
		<view class="list">
			<!--遍历动态列表-->
			<view class="article-item" v-for="(item, index) in list" :key="index">

				<!-- 头像 -->
				<view class="avatar-group">
					<view class="avatar" @tap="toDetail(item.user.id)">
						<image lazy-load="true" :src="item.user.user_icon" mode="aspectFill" class="img" />
						<view class="man" v-if="item.user.sex == 0">
							<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
						</view>
						<view class="woman" v-else-if="item.user.sex == 1">
							<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
						</view>
					</view>
				</view>

				<view class="main">
					<!-- 昵称 -->
					<view class="name">
						<view class="name-text" @tap="toDetail(item.user.id)">
							{{ item.user.username }}
						</view>
						<image v-if="item.user.level==1" class="name-vip" src="@/static/images/vip/vip.png"
							mode="aspectFill" />
					</view>

					<!-- 位置，时间 -->
					<view class="position-group">
						<text>{{ item.user.city }}</text>
						<text class="line" v-if="item.user.city!=''">|</text>
						<text>{{ item.create_time }}</text>
					</view>

					<!-- 更多 -->
					<image class="more" src="../../static/icon/more.png" @click="more"></image>

					<!-- 文本内容 -->
					<view class="content" @tap="navigateToDetail(item.id)">
						{{ item.text }}
					</view>

					

					<!-- 相片列表 -->
					<view class="photo" v-if="item.type == 1">
						<!-- 只有一张相片时 -->
						<view class="only" v-if="item.image.length < 2">
							<view class="item" v-for="(photo, pIndex) in item.image" :key="pIndex"
								@tap="previewImage(item.image, pIndex)">
								<image lazy-load="true" :src="photo" mode="aspectFill" />
							</view>
						</view>
						<!-- 超过一张相片时 -->
						<view class="plural" v-if="item.image.length > 1">
							<cl-row :gutter="21">
								<cl-col :span="8" v-for="(photo, pIndex) in item.image" :key="pIndex"
									@tap="previewImage(item.image, pIndex)">
									<view class="item">
										<image lazy-load="true" :src="photo" mode="scaleToFill" />
									</view>
								</cl-col>
							</cl-row>
						</view>
					</view>

					<!-- 底部功能按钮 -->
					<view class="bottom">
						<!-- 点赞 -->
						<view class="bottom-item like">
							<template v-if="item.is_praise == 1">
								<image src="@/static/images/article/like.png" @tap="canclePraise(index)" />
							</template>
							<template v-else>
								<image src="@/static/images/article/no_like.png" @tap="praise(index)" />
							</template>
							<view class="text">
								{{item.praise_num}}
							</view>
						</view>

						<!-- 评论 -->
						<view class="bottom-item comment" @tap="navigateToDetail(item.id)">
							<image src="@/static/images/article/dazhaohu.png" mode="aspectFill" />
							<view class="text">
								{{item.comment_num}}
							</view>
						</view>

						<!-- 打招呼 -->
						<view v-if="User.userinfo.id!=item.user.id" class="bottom-item"
							@tap="navigateToChatDetail(item.user.id, item.user.username)">
							<image src="@/static/images/article/dazhaohu_2.png" mode="aspectFill" />
							<view class="text">
								打招呼
							</view>
						</view>
					</view>
				</view>
			</view>

			<load-more :loadText="loadText"></load-more>
		</view>

		<more-option ref="moreOption"></more-option>
	</view>
</template>

<script>
	import loadMore from "../../components/load-more.vue";
	import moreOption from "./components/more-option.vue"
	export default {
		components: {
			loadMore,
			moreOption
		},
		// onLoad() {
		// 	this.getArticleList();
		// },
		data() {
			return {
				keywords: "",
				tabsActive: "recomm",
				loadText: "加载中...",
				isLoading: false,
				hasMore: true,
				page: 1,
				tabs: [{
						label: "最新",
						name: "recomm",
					},
					{
						label: "同城",
						name: "nearby",
					},
				],
				hot: [{
						cover: require("@/static/images/hot-cover-1.png"),
						title: "#假装对象回我#",
					},
					{
						cover: require("@/static/images/hot-cover-2.png"),
						title: "#恋爱脱单区#",
					},
					{
						cover: require("@/static/images/hot-cover-3.png"),
						title: "#固连嘀嘀嘀#",
					},
				],
				list: [],
				may: [{
						img: require("@/static/images/may-1.png"),
						title: "#今日心情#",
						num: "15478条动态",
					},
					{
						img: require("@/static/images/may-2.png"),
						title: "#三行情书#",
						num: "15478条动态",
					},
					{
						img: require("@/static/images/may-3.png"),
						title: "#自我介绍#",
						num: "15478条动态",
					},
				]
			};
		},
		onReachBottom() {
			this.getArticleList();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.hasMore = true;
			this.loadText = "加载中...";
			this.list = [];
			this.isLoading = false;
			this.keywords = "";
			this.getArticleList();
		},
		methods: {
			more() {
				this.$refs.moreOption.open();
			},
			deleteArticleModal(id) {
				let that = this;
				uni.showModal({
					content: "确认删除这条动态?",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.deleteArticle(id);
						}
					}
				})
			},
			async deleteArticle(id) {
				let [err, res] = await this.$http.post('dynamic/article/del', {
					article_id: id
				});

				if (!this.$http.errorCheck(err, res)) {
					return;
				}

				uni.showToast({
					title: '删除成功'
				});
				//uni.startPullDownRefresh({})
			},
			navigateToChatDetail(userID, nickName) {
				let jsonUserID = encodeURIComponent(JSON.stringify(userID));
				let jsonNickName = encodeURIComponent(JSON.stringify(nickName));
				let jsonConversationID = encodeURIComponent(JSON.stringify("C2C" + userID));
				let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
			searchArticle(event) {
				let keywords = event.target.value;
				keywords = keywords.replace(/^\s+|\s+$/g, "");
				if (keywords == "") {
					uni.showToast({
						title: '请输入搜索词',
						icon: 'error'
					});
					return;
				}

				this.keywords = keywords;
				this.page = 1;
				this.hasMore = true;
				this.loadText = "加载中...";
				this.list = [];
				this.isLoading = false;
				this.getArticleList();
			},
			activeTabs(item) {
				this.tabsActive = item.name;

				this.page = 1;
				this.hasMore = true;
				this.loadText = "加载中...";
				this.list = [];
				this.isLoading = false;
				this.keywords = "";
				this.getArticleList();
			},
			navigateToPublish() {
				uni.navigateTo({
					url: "/pages/article/publish"
				})
			},
			previewImage(image, index) {
				uni.previewImage({
					urls: image,
					indicator: "number",
					current: index,
				})
			},
			navigateToDetail(articleId) {
				uni.navigateTo({
					url: "/pages/article/detail?articleId=" + articleId
				})
			},
			async getArticleList() {
				if (!this.hasMore || this.isLoading) {
					return;
				}

				this.isLoading = true;

				let param = {
					page: this.page
				}
				if (this.keywords != "") {
					param.keywords = this.keywords;
				}

				if (this.tabsActive == "nearby") {
					param.nearby = 1;
				}

				let [err, res] = await this.$http.get('dynamic/article/lists', param);

				if (!this.$http.errorCheck(err, res)) {
					return;
				}

				if (res.data.data.length == 0 || res.data.data.length < 10) {
					this.hasMore = false;
					this.loadText = "没有更多了...";
				}

				this.page++;
				uni.stopPullDownRefresh();
				this.isLoading = false;

				this.list = this.list.concat(res.data.data);
			},
			async praise(index) {
				let articleId = this.list[index].id;

				let [err, res] = await this.$http.post('Praise/add', {
					article_id: articleId
				});

				if (!this.$http.errorCheck(err, res)) {
					return;
				}

				this.list[index].is_praise = 1;
				this.list[index].praise_num++;
			},
			async canclePraise(index) {
				let articleId = this.list[index].id;

				let [err, res] = await this.$http.post('Praise/cancle', {
					article_id: articleId
				});

				if (!this.$http.errorCheck(err, res)) {
					return;
				}

				this.list[index].is_praise = 0;
				this.list[index].praise_num--;
			},
			// 前往详情
			toDetail(uid) {
				uni.navigateTo({
					url: "/pages/detail/index?uid=" + uid,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page-dynamice {
		.cl-topbar {
			.content {
				display: flex;
				align-items: center;
				position: relative;

				.icon {
					position: absolute;
					top: calc(50% - 23rpx);
					right: 0;
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
					z-index: 99;
					font-size: 15rpx;
				}

				.tabs {
					display: flex;
					justify-content: center;
					width: 100%;
					padding: 10rpx 120rpx 0 120rpx;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 25rpx;
						font-weight: 400;
						color: #b1b1b1;
						flex: 1;

						image {
							display: block;
							margin-top: 6rpx;
							width: 44rpx;
							height: 12rpx;
						}

						&.is-active {
							font-size: 32rpx;
							font-weight: 500;
							color: #282828;
						}
					}
				}
			}
		}

		.search {
			padding: 30rpx;
			background-color: #ffffff;

			.cl-input {
				border: 0;
				background-color: #f5f5f5;
			}
		}

		.list {
			width: calc(100% - 60rpx);
			margin: 0 30rpx 42rpx 30rpx;
			border-bottom: 2rpx solid #f5f5f5;

			.article-item {
				display: flex;
				position: relative;
				margin-bottom: 60rpx;

				.more {
					position: absolute;
					top: 0;
					right: 30rpx;
					width: 35rpx;
					height: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.avatar-group {
					.avatar {
						position: relative;
						width: 80rpx;
						height: 80rpx;
						margin-right: 30rpx;

						.img {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}

						.man {
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							right: 0;
							bottom: 0;
							width: 30rpx;
							height: 30rpx;
							background-color: #58bcff;
							border-radius: 50%;

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}

						.woman {
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							right: 0;
							bottom: 0;
							width: 30rpx;
							height: 30rpx;
							background-color: #ff5a70;
							border-radius: 50%;

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
				}

				.main {
					width: 100%;

					.name {
						display: flex;
						margin-bottom: 5rpx;
					}

					.name-text {
						font-size: 26rpx;
						font-weight: bold;
						color: #282828;
						line-height: 40rpx;
						margin-right: 10rpx;
					}

					.name-vip {
						width: 40rpx;
						height: 40rpx;
					}

					.position-group {
						margin-bottom: 10rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #b1b1b1;

						.line {
							margin: 0 10rpx;
						}
					}

					.more {
						width: 36rpx;
						height: 36rpx;
					}

					.photo {
						margin-bottom: 10rpx;

						.only {
							image {
								width: 336rpx;
								height: 336rpx;
								border-radius: 18rpx;
							}
						}

						.plural {
							.item {
								height: 200rpx;
								display: flex;
								position: relative;
								margin-bottom: 10rpx;

								image {
									width: 200rpx;
									height: 200rpx;
									border-radius: 18rpx;
								}
							}
						}
					}

					.content {
						margin-bottom: 10rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #282828;
						word-break: break-all;
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						width: 100%;

						&-item {
							display: flex;
							align-items: center;

							image {
								width: 42rpx;
								height: 42rpx;
								margin-right: 12rpx;
							}

							.text {
								color: #b1b1b1;
								font-size: 21rpx;
							}
						}

						.comment {
							margin-right: 60rpx;
						}

						.like {
							margin-right: 60rpx;
						}
					}
				}
			}
		}
	}
</style>